<template>
  <div class="user-box">
    <Header />
    <div class="container">
      <div class="inner">
        <div class="author">
          <div class="dis-row">
            <el-avatar :size="124" />
            <div v-if="!centerShow" @click="detailsMine" class="dis-row details-img">
              <img class="down-img" src="@/assets/images/details.png" alt />
              查看个人页
            </div>

            <!-- <div v-if="centerShow" @click="detailsMine" class="dis-row details-img">
              <img class="down-img" src="@/assets/images/setting.png" alt />
              个人页设定
            </div> -->
          </div>

          <div class="name" >
            <div v-if="centerShow">冬雪十二</div>
            <div class="user-id" v-if="centerShow">用户ID 123456</div>

            <div class="space-between user-data-box" v-if="centerShow">
              <div @click="guanzhuAction" class="user-data">
                <div class="fensi-number">709</div>
                <div class="fensi-text">关注</div>
              </div>

              <div @click="guanzhuAction" class="user-data">
                <div class="fensi-number">709</div>
                <div class="fensi-text">粉丝</div>
              </div>
            </div>

            <div class="zhuizong-box" v-if="centerShow">
              关注
            </div>

             <div class="zhuizong-box" v-if="!centerShow">
              上传图像
            </div>
          </div>

          <!-- <p class="uid">
            <img class="down-img" src="../assets/images/down.png" alt />
            上傳頭像
          </p>-->
        </div>
        <div v-if="!centerShow">
          <div class="jianjie-box">
            <div class="space-between">
              <div>昵称</div>
              <div class="dis-row">
                <div @click="editName()">
                  <img class="down-img" src="../assets/images/edit.png" alt />
                </div>
                <div @click="editName()" class="edit-text">编辑</div>
              </div>
            </div>
            <div class="user-name">角角者918616</div>
          </div>

          <div class="jianjie-box">
            <div class="space-between">
              <div>简介</div>
              <div class="dis-row">
                <div @click="editNameJianjie()">
                  <img class="down-img" src="../assets/images/edit.png" alt />
                </div>
                <div @click="editNameJianjie()" class="edit-text">编辑</div>
              </div>
            </div>
            <div class="user-name">还没有自我介绍？请点编辑新增个人简介</div>
          </div>

          <!-- <div class="jianjie-box">
            <div class="space-between">
              <div>出生年月日</div>
            </div>
            <div class="user-name">2025-08-14</div>
          </div>-->

          <div class="jianjie-box zhanghao-box">
            <div class="space-between">
              <div>账号管理</div>
              <div class="dis-row">
                <div @click="zhangAction">
                  <img class="down-img" src="../assets/images/arrow-right.png" alt />
                </div>
              </div>
            </div>
          </div>

          <!-- <div class="jianjie-box">
            <div class="space-between">
              <div>我的服务中心</div>
              <div class="dis-row">
                <div>
                  <img class="down-img" src="../assets/images/arrow-right.png" alt />
                </div>
              </div>
            </div>
            <div class="user-name">
              <div class="space-between">
                <div>角点余额</div>
                <div>0点</div>
              </div>
            </div>
          </div>-->

          <!-- <div class="jianjie-box">
            <div class="space-between">
              <div>通知设定</div>
            </div>

            <div class="space-between quanzhan-box">
              <div>全站 Alert</div>
              <div>
                <el-checkbox v-model="value"></el-checkbox>
              </div>
            </div>

            <div class="space-between quanzhan-box">
              <div>Email 通知</div>
              <div>
                <el-checkbox v-model="value"></el-checkbox>
              </div>
            </div>

            <div class="space-between quanzhan-box">
              <div>
                LINE 通知
                <span class="user-desc">( 使用说明 )</span>
              </div>
              <div class="haoyou-box">
                <img class="jiaru-img" src="https://www.kadokado.cn/static/images/addLineFriend.svg" alt />
              </div>
            </div>
          </div>-->

          <!-- <div class="jianjie-box zhanghao-box">
            <div class="space-between">
              <div>內容设定</div>
            </div>
            <div class="user-name">
              <div class="space-between quanzhan-box">
                <div>18 禁作品封面显示保护遮罩</div>
                <div>
                  <el-checkbox v-model="value"></el-checkbox>
                </div>
              </div>
            </div>
          </div>-->

          <!-- <div class="jianjie-box">
            <div class="space-between">
              <div>创作者专区</div>
            </div>
            <div class="user-name">
              <div class="space-between quanzhan-box">
                <div>
                  允许读者送礼
                  <el-icon>
                    <InfoFilled />
                  </el-icon>
                </div>
                <div>
                  <el-checkbox v-model="value"></el-checkbox>
                </div>
              </div>
            </div>
            <div class="tioajian-box">
              <div class="qiyong-li">启用条件：</div>
              <ul class="qiyong-ul-box">
                <li class="qiyong-li qiyong-li-box">至少已发布一部作品，阅读数已达到200(含) 以上</li>
              </ul>
              <div class="details-desc">>> 查看更多说明</div>
            </div>
          </div>-->
        </div>
        <div class="info" v-if="centerShow">
          <p>∴冬雪十二的文字夢∵</p>
          <p>
            主要是耽美向作家，也會寫其他題材。
            <br />戀愛、奇幻、靈異、治癒和山系。
          </p>
          <p>
            IG︰snow_aart
            <br />主要活躍地: Kadokado/CxC/POPO/PNN
            <br />其次經營地: 琅琅/星球
          </p>
          <p>…。…。…。…</p>
          <p>
            -《葉子各有不同——各種短篇作品》2025台灣角川獨家先行合作簽約
            <br />-《拜託!我不想拯救世界》2025台灣角川獨家先行合作簽約
            <br />-《在BL遊戲裡成了導師擔當》曾獲2025年2月券拜角角者，2023台灣角川獨家網路簽約
            <br />-《你的決定錯了》曾獲2024KadoKado百万小说創作大賞BL小说組複選作品入圍
            <br />-《顏料復生學》曾獲2023角川百万小说大賽BL小说組複選作品入圍
            <br />-《晴天不要出門》曾獲2023原創星球寫作爭霸戰第3屆複選作品入圍
          </p>

          <p>
            - 榮獲2024KadoKado年度回顧裡的獎金獵人Top5
            <br />- 2024開始成為原創星球嚴選作家
            <br />
          </p>

          <p>…。…。…。…</p>
        </div>

        <div class="work-box" v-if="centerShow">
          <el-tabs class="demo-tabs" v-model="activeName" :stretch="true">
            <el-tab-pane label="作品" name="first" />
            <el-tab-pane label="动态" name="second" />
          </el-tabs>
          <div class="title">
            <h3>作品列表</h3>
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                全部
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>全部</el-dropdown-item>
                  <el-dropdown-item>连载中</el-dropdown-item>
                  <el-dropdown-item>已完结</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <div class="work-list">
            <div class="work-item">
              <div class="top">
                <div class="image">
                  <img src="../assets/images/book1.jpg" alt />
                </div>
                <div class="text">
                  <span>在BL遊戲裡成了導師擔當</span>
                  <span>冬雪十二</span>
                  <span>我不要做主角受，我要反受為攻，攻克全部人的屁股！</span>
                  <span>
                    專業情色受 配音員 陸穴(攻) X 遊戲宣傳 殷望 (受) 【2025/2月
                    - 券拜角角者得獎作】 【2023-2024 KadoKado簽書作品】
                    雖然沒有人不會幻想過有朝一日穿越遊戲，但絕不會有人想穿越進去一隻BL
                    18禁遊戲裡當主角。
                  </span>
                </div>
              </div>
              <div class="bottom">
                <div class="b-l">
                  <p>
                    <el-icon :size="16">
                      <Star />
                    </el-icon>
                    <span>642</span>
                  </p>
                  <p>
                    <el-icon :size="16">
                      <View />
                    </el-icon>
                    <span>34.3 Ｋ</span>
                  </p>
                </div>
                <div class="b-r">
                  <el-icon :size="24" color="#FA715D">
                    <Star />
                  </el-icon>
                </div>
              </div>
            </div>
            <div class="work-item">
              <div class="top">
                <div class="image">
                  <img src="../assets/images/book1.jpg" alt />
                </div>
                <div class="text">
                  <span>在BL遊戲裡成了導師擔當</span>
                  <span>冬雪十二</span>
                  <span>我不要做主角受，我要反受為攻，攻克全部人的屁股！</span>
                  <span>
                    專業情色受 配音員 陸穴(攻) X 遊戲宣傳 殷望 (受) 【2025/2月
                    - 券拜角角者得獎作】 【2023-2024 KadoKado簽書作品】
                    雖然沒有人不會幻想過有朝一日穿越遊戲，但絕不會有人想穿越進去一隻BL
                    18禁遊戲裡當主角。
                  </span>
                </div>
              </div>
              <div class="bottom">
                <div class="b-l">
                  <p>
                    <el-icon :size="16">
                      <Star />
                    </el-icon>
                    <span>642</span>
                  </p>
                  <p>
                    <el-icon :size="16">
                      <View />
                    </el-icon>
                    <span>34.3 Ｋ</span>
                  </p>
                </div>
                <div class="b-r">
                  <el-icon :size="24" color="#FA715D">
                    <Star />
                  </el-icon>
                </div>
              </div>
            </div>
            <div class="work-item">
              <div class="top">
                <div class="image">
                  <img src="../assets/images/book1.jpg" alt />
                </div>
                <div class="text">
                  <span>在BL遊戲裡成了導師擔當</span>
                  <span>冬雪十二</span>
                  <span>我不要做主角受，我要反受為攻，攻克全部人的屁股！</span>
                  <span>
                    專業情色受 配音員 陸穴(攻) X 遊戲宣傳 殷望 (受) 【2025/2月
                    - 券拜角角者得獎作】 【2023-2024 KadoKado簽書作品】
                    雖然沒有人不會幻想過有朝一日穿越遊戲，但絕不會有人想穿越進去一隻BL
                    18禁遊戲裡當主角。
                  </span>
                </div>
              </div>
              <div class="bottom">
                <div class="b-l">
                  <p>
                    <el-icon :size="16">
                      <Star />
                    </el-icon>
                    <span>642</span>
                  </p>
                  <p>
                    <el-icon :size="16">
                      <View />
                    </el-icon>
                    <span>34.3 Ｋ</span>
                  </p>
                </div>
                <div class="b-r">
                  <el-icon :size="24" color="#FA715D">
                    <Star />
                  </el-icon>
                </div>
              </div>
            </div>
            <div class="work-item" v-if="centerShow">
              <div class="top">
                <div class="image">
                  <img src="../assets/images/book1.jpg" alt />
                </div>
                <div class="text">
                  <span>在BL遊戲裡成了導師擔當</span>
                  <span>冬雪十二</span>
                  <span>我不要做主角受，我要反受為攻，攻克全部人的屁股！</span>
                  <span>
                    專業情色受 配音員 陸穴(攻) X 遊戲宣傳 殷望 (受) 【2025/2月
                    - 券拜角角者得獎作】 【2023-2024 KadoKado簽書作品】
                    雖然沒有人不會幻想過有朝一日穿越遊戲，但絕不會有人想穿越進去一隻BL
                    18禁遊戲裡當主角。
                  </span>
                </div>
              </div>
              <div class="bottom">
                <div class="b-l">
                  <p>
                    <el-icon :size="16">
                      <Star />
                    </el-icon>
                    <span>642</span>
                  </p>
                  <p>
                    <el-icon :size="16">
                      <View />
                    </el-icon>
                    <span>34.3 Ｋ</span>
                  </p>
                </div>
                <div class="b-r">
                  <el-icon :size="24" color="#FA715D">
                    <Star />
                  </el-icon>
                </div>
              </div>
            </div>
          </div>
        </div>
        <el-drawer :custom-class="'drawer-box drawer-box-1'" :size="'50%'" direction="btt" v-model="guanzhuFensi"
          :show-close="false">
          <div class="popule-title">
            <div>379位 关注</div>
            <div class="bg-name">
              <div class="dis-row">
                <div class="avg-header"></div>
                <div>
                  <div>名字</div>
                  <div class="jianjie-text">简介</div>
                </div>
              </div>
            </div>
          </div>
        </el-drawer>
        <el-drawer :custom-class="'drawer-box'" :size="'50%'" direction="btt" v-model="visible" :show-close="false">
          <div>修改昵称</div>
          <div>
            <el-input class="nickname-input" placeholder="角角者918616"></el-input>
          </div>
          <div class="space-between fen-box">
            <div>9 / 30</div>
            <div class="dis-row">
              <div>取消</div>
              <div class="enter-btn">确定</div>
            </div>
          </div>
        </el-drawer>

        <el-drawer :custom-class="'drawer-box'" :size="'50%'" direction="btt" v-model="visibleJianjie"
          :show-close="false">
          <div>修改简介</div>
          <div>
            <el-input placeholder="请输入简介" type="textarea" :rows="10" class="nickname-input"></el-input>
          </div>
          <div class="space-between fen-box">
            <div>9 / 30</div>
            <div class="dis-row">
              <div>取消</div>
              <div class="enter-btn">确定</div>
            </div>
          </div>
        </el-drawer>
      </div>
    </div>
  </div>
</template>

<script setup>
import Header from "../components/Header.vue";
import { ArrowDown, Star, View } from "@element-plus/icons-vue";
import { InfoFilled } from "@element-plus/icons-vue";
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const visible = ref(false);
const visibleJianjie = ref(false);
const centerShow = ref(false);
const activeName = ref("first");
const guanzhuFensi = ref(false)
const guanzhuAction = () => {
  guanzhuFensi.value = true
}
const editName = () => {
  visible.value = true;
};

const detailsMine = () => {
  if (centerShow.value == true) {
    centerShow.value = false;
  } else {
    centerShow.value = true;
  }
};

const editNameJianjie = () => {
  visibleJianjie.value = true;
};

const zhangAction = () => {
  router.push("/user/account");
};
</script>

<style lang="scss" scoped>
.user-id {
  color: #718096;
  font-size: 14px;
}

.qiyong-ul-box {

  // 给li前面加圆点
  li {
    &::before {
      content: "";
      display: inline-block;
      width: 0.2rem;
      height: 0.2rem;
      border-radius: 50%;
      background-color: #718096;
      margin-right: 0.2rem;
    }
  }
}

.qiyong-li-box {
  margin-top: 0.4rem;
}

.qiyong-li {
  color: #718096;
  font-size: 0.8rem;
}

.tioajian-box {
  background-color: #f7fafc;
  padding: 1rem;
}

.details-desc {
  color: #ff8674;
  text-align: right;
  margin-top: 1rem;
  font-size: 0.8rem;
  text-decoration: underline;
}

.quanzhan-box {
  margin-top: 2rem;
}

.zhanghao-box {
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 3rem;
}

.jianjie-box {
  margin-top: 2rem;
}

.space-between {
  display: inline-flex;
  justify-content: space-between;
  width: 100%;
}

.down-img {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.5rem;
}

.dis-row {
  display: inline-flex;
  align-items: center;
}

.user-name {
  color: #718096;
  font-size: 0.8rem;
  margin-top: 1.5rem;
}

.edit-text {
  color: #ff8674;
  font-size: 0.8rem;
  margin-bottom: 0.2rem;
}

.user-desc {
  color: #ff8674;
}

.haoyou-box {}

.user-box {
  .inner {
    margin: 2rem 0;

    .author {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
      margin-bottom: 2rem;

      .name {
        margin: 0px 1rem;
        font-size: 1.5rem;
        font-weight: 400;
        line-height: 1.5;
        letter-spacing: 0.05em;
        word-break: break-all;
        text-align: center;
        width: 100%;
      }

      .uid {
        font-size: 0.8rem;
        font-weight: 400;
        line-height: 1.5;
        letter-spacing: 0.05em;
        color: #718096;
        border: 1px solid #ff8674;
        color: #ff8674;
        border-radius: 2rem;
        padding: 0.5rem 2rem;
        display: inline-flex;
        align-items: center;

        .down-img {
          width: 1.5rem;
          height: 1.5rem;
          margin-right: 0.5rem;
        }
      }
    }

    .info {
      display: flex;
      flex-direction: column;
      gap: 2rem;
      margin-bottom: 2rem;

      p {
        box-sizing: border-box;
        margin: 0px;
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 2;
        letter-spacing: 0.05em;
        color: #718096;
      }
    }
  }

  .work-box {
    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: -10px;

      :deep(.el-dropdown-link) {
        display: flex;
        align-items: center;
      }

      h3 {
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        letter-spacing: 0.05em;
        color: #2d3748;
      }
    }
  }
}

.work-list {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 2rem 1rem;

  .work-item {
    .top {
      display: flex;
      gap: 1rem;
      overflow: hidden;

      .image {
        flex: 0 0 auto;
        width: 7rem;

        img {
          display: block;
          max-width: 100%;
        }
      }

      .text {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 10px;

        span {
          font-size: 0.75rem;
          font-weight: 400;
          line-height: 1.625;
          letter-spacing: 0.05em;
          color: #718096;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          word-break: break-all;
          overflow: hidden;

          &:nth-of-type(1) {
            color: #2d3748;
            font-size: 0.875rem;
            font-weight: 500;
            line-height: 1.5;
          }

          &:nth-of-type(2) {
            color: #2d3748;
          }

          &:nth-of-type(3) {
            color: #ff8674;
          }
        }
      }
    }

    .bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 3rem;

      p {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: #718096;
        font-size: 0.75rem;
        font-weight: 400;
        line-height: 1.625;
        letter-spacing: 0.05em;
      }

      .b-l {
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }

      .b-r {
        i {
          height: 3rem;
          width: 3rem;
          background-color: #f7fafc;
          border-radius: 50%;
        }
      }
    }
  }
}

@media screen and (min-width: 640px) {
  .work-list {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media screen and (min-width: 768px) {
  .work-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.nickname-input {
  margin-top: 1rem;
}

.fen-box {
  font-size: 0.8rem;
  margin-top: 2rem;
}

.enter-btn {
  margin-left: 1rem;
  color: #ff8674;
}

// ::v-deep .el-drawer.ttb,
// .el-drawer.btt {
//   width: 400px !important;
// }

::v-deep .el-drawer.btt {
  width: 40%;
  margin-left: 30%;
}

.details-img {
  position: absolute;
  margin-left: 140px;
}

/* 平板设备 */
@media screen and (max-width: 992px) {}

/* 移动设备 */
@media screen and (max-width: 768px) {
  ::v-deep .el-drawer.btt {
    width: 100%;
    margin-left: 0%;
  }

  .el-tabs {
    width: 100%;
    margin-left: 0;
  }
}

/* 小屏幕手机 */
@media screen and (max-width: 480px) {
  ::v-deep .el-drawer.btt {
    width: 100%;
    margin-left: 0%;
  }

  .el-tabs {
    width: 100%;
    margin-left: 0;
  }
}

.user-data {
  font-size: 16px;
}

.user-data-box {
  width: 60%;
}

.zhuizong-box {
  width: 60%;
  padding: 10px 0;
  border: 1px #ff8674 solid;
  border-radius: 30px;
  margin-left: 20%;
  margin-top: 10px;
  font-size: 16px;
  color: #ff8674;
}

.fensi-number {
  font-size: 0.875rem;
  color: #2d3748;
}

.fensi-text {
  font-size: 0.625rem;
  color: #2d3748;
}

.popule-title {
  // background-color: #F3F6F9;
}

.drawer-box-1 {
  background-color: #F3F6F9 !important;

}

::v-deep .el-drawer__header {
  display: none !important;
}

.jianjie-text {
  color: gray;
  font-size: 14px;
}

.avg-header {
  border: 1px red solid;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  margin-right: 0.5rem;

}

.bg-name {
  margin-top: 9px !important;
}
</style>